<template>
  <div>
    <el-button size="mini" @click="addSoftType()">添加游戏类型</el-button>
    <el-table @expand-change="clickButton"  :data="list"


    style="width: 100%"
    row-key="id"
    lazy
    :load="load"
    :tree-props="{children: 'children',hasChildren: 'hasChildren'}">
      <!-- <el-table-column type="expand" prop="children">
        <template slot-scope="scope">
          <el-table :data="scope.row.children" style="width: 100%">
            <el-table-column
              label="名字"
              prop="app_type_name"
            ></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="removeChildren(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column> -->
      <el-table-column label="类型" prop="app_type_name">
        
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="addChildrenType(scope.$index, scope.row)"
            >添加子类型</el-button
          >
          <el-button
            size="mini"
            type="success"
            @click="changeFatherType(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--添加游戏类型 -->
    <el-dialog
      class="dialog"
      title="添加信息"
      :visible.sync="dialogVisible"
      :show-close="false"
      :before-close="addSoftType"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="类型" prop="type">
          <el-input v-model="ruleForm.type"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="escButton()">取消</el-button>
        <el-button @click="addSuccess()" type="primary">添加</el-button>
      </div>
    </el-dialog>
    <!-- 修改游戏大类型 -->
    <el-dialog
      class="dialog"
      title="添加信息"
      :visible.sync="show"
      :show-close="false"
      :before-close="changeFatherType"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="类型" prop="changeType">
          <el-input v-model="ruleForm.changeType"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="escChange()">取消</el-button>
        <el-button @click="changeSuccess()" type="primary">修改</el-button>
      </div>
    </el-dialog>
    <!-- 修改子类型 -->
    <el-dialog
      class="dialog"
      title="添加信息"
      :visible.sync="show1"
      :show-close="false"
      :before-close="handleEdit"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="类型" prop="childrenType">
          <el-input v-model="ruleForm.childrenType"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="escChildren()">取消</el-button>
        <el-button @click="childrenSuccess()" type="primary">修改</el-button>
      </div>
    </el-dialog>
    <!-- 添加子类型 -->
    <el-dialog
      class="dialog"
      title="添加信息"
      :visible.sync="show2"
      :show-close="false"
      :before-close="addChildrenType"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="类型" prop="childType">
          <el-input v-model="ruleForm.childType"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="escAddChildren()">取消</el-button>
        <el-button @click="addChildrenSuccess()" type="primary">添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import http from '../api/index';
export default {
  mounted() {
    http.softType().then((r) => {
      console.log(r);
      this.list = r.data;
      this.list[0].children = [
        {id:1,app_type_name:566}
      ]
    });
  },
  data() {
    var validateType = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入游戏类型'));
      } else {
        callback();
      }
    };
    var validateChangeType = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入游戏类型'));
      } else {
        callback();
      }
    };
    var validateChildrenType = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入游戏类型'));
      } else {
        callback();
      }
    };
    var validateChildType = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入游戏类型'));
      } else {
        callback();
      }
    };
    return {
      activeNames: ['1'],
      list: [],
      children: [],
      dialogVisible: false,
      show: false,
      show1: false,
      show2: false,
      id: '',
      childrenId: '',
      fatherId:'',
      ruleForm: {
        type: '',
        changeType: '',
        childrenType: '',
        childType: '',
      },
      rules: {
        type: [{ required: true, validator: validateType, trigger: 'blur' }],
        changeType: [
          { required: true, validator: validateChangeType, trigger: 'blur' },
        ],
        childrenType: [
          { required: true, validator: validateChildrenType, trigger: 'blur' },
        ],
        childType: [
          { required: true, validator: validateChildType, trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
     load(tree, treeNode, resolve) {
       console.log('asdfg');
        setTimeout(() => {
          resolve(tree.children)
        }, 1000)
      },
    clickButton(val,i) {
      console.log(val,i);
      if(i.length!==0){


  http
    .softChildType({
      app_type_id: val.app_type_id,
    })
    .then((r) => {
      console.log(r);
      val.children = r.data;
      console.log(val);
      console.log(val.children);
      // console.log(val.childrenList);
    });

      }
    },
    // 添加子类型
    addChildrenType(index,row) {
      console.log(row);
      this.fatherId=row.app_type_id;
      console.log(this.fatherId);
      this.show2 = true;
    },
    // 添加子类型成功
    addChildrenSuccess() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // http
          //   .addSoftType({
          //     app_type_id:this.fatherId,
          //     app_type_name: this.ruleForm.childType,
          //   })
          //   .then((r) => {
          //     console.log(r);
          //     // location.reload();
          //   });
          console.log(this.fatherId);
          console.log(this.ruleForm.childType);
          this.show2 = false;
        }
      });
    },
    // 取消添加子类型
    escAddChildren(){
      this.$refs.ruleForm.resetFields();
      this.show2 = false;
    },
    // 添加游戏类型
    addSoftType() {
      this.dialogVisible = true;
    },
    // 添加游戏类型成功
    addSuccess() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          http
            .addSoftType({
              app_type_name: this.ruleForm.type,
            })
            .then((r) => {
              console.log(r);
              location.reload();
            });
          console.log(this.ruleForm.type);
          this.dialogVisible = false;
        }
      });
    },
    // 取消添加
    escButton() {
      this.$refs.ruleForm.resetFields();
      this.dialogVisible = false;
    },
    // 修改游戏大类型
    changeFatherType(index, row) {
      this.ruleForm.changeType = row.app_type_name;
      this.id = row.app_type_id;
      console.log(this.id);
      this.show = true;
    },
    // 修改成功
    changeSuccess() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          http
            .changeSoftType({
              app_type_name: this.ruleForm.changeType,
              app_type_id: this.id,
            })
            .then((r) => {
              console.log(r);
              http.softType().then((r) => {
                console.log(r);
                this.list = r.data;
              });
            });
          console.log(this.id);
          console.log(this.ruleForm.changeType);
          this.show = false;
        }
      });
    },
    // 取消修改
    escChange() {
      this.$refs.ruleForm.resetFields();
      this.show = false;
    },
    // 修改子类型
    handleEdit(index, row) {
      this.childrenId = row.app_type_id;
      this.ruleForm.childrenType = row.app_type_name;
      console.log(this.ruleForm.childrenType);
      console.log(this.childrenId);
      this.show1 = true;
    },
    // 修改子类型成功
    childrenSuccess() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          http
            .changeSoftType({
              app_type_name: this.ruleForm.childrenType,
              app_type_id: this.childrenId,
            })
            .then((r) => {
              console.log(r);
              location.reload();
            });
          // console.log(this.id);
          console.log(this.ruleForm.childrenType);
          console.log(this.childrenId);
          this.show = false;
        }
      });
    },
    // 取消修改子类型
    escChildren() {
      this.$refs.ruleForm.resetFields();
      this.show1 = false;
    },
    // 删除子类型
    removeChildren(index, row) {
      console.log(row.app_type_id);
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          http
            .removeSoftType({
              app_type_id: row.app_type_id,
            })
            .then((r) => {
              console.log(r);
              location.reload();
            });
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
    // 删除游戏大类型
    handleDelete(index, row) {
      console.log(row.app_type_id);
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          http
            .removeSoftType({
              app_type_id: row.app_type_id,
            })
            .then((r) => {
              console.log(r);
              http.softType().then((r) => {
                console.log(r);
                this.list = r.data;
              });
            });
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
  },
};
</script>